import React, { Component } from "react";

// styled-components用于在js里面写css
import styled from "styled-components";

// 定义的是组件, .span表示会生成一个span标签
// 模板字符串写标准的css样式

// 可以复用，也可以传递参数
const Hello = styled.span`
  font-size: 30px;
  color: ${(props) => props.color};
  border: 1px solid #000;
`;

class App extends Component {
  render() {
    return (
      <>
        <h2>styled-components</h2>
        <Hello color="red">hello react1</Hello>
        <Hello color="green">hello react2</Hello>
      </>
    );
  }
}

export default App;
